<template>
  <!-- 分类管理弹窗 -->
  <div
    class="dialog-overlay"
    :class="{ active: showDialog }"
    v-if="showDialog"
  >
    <!-- 云朵装饰 -->
    <div class="cloud cloud-1"><i class="iconfont icon-cloud"></i></div>
    <div class="cloud cloud-2"><i class="iconfont icon-cloud"></i></div>
    <div class="cloud cloud-3"><i class="iconfont icon-cloud"></i></div>

    <!-- 星星装饰 -->
    <div class="decoration star-1"><i class="iconfont icon-star"></i></div>
    <div class="decoration star-2"><i class="iconfont icon-star"></i></div>
    <div class="decoration star-3"><i class="iconfont icon-star"></i></div>

    <div
      class="dialog-content"
      :class="{ 'bounce-in': showDialog }"
    >
      <div class="dialog-header">
        <div class="dialog-title">
          <h2>{{ isEdit ? '编辑分类' : '新建分类' }}</h2>
          <div class="title-underline"></div>
        </div>
        <button
          class="close-btn"
          @click="closeDialog"
        >
          <i class="iconfont icon-close"></i>
        </button>
      </div>

      <div class="dialog-body">
        <!-- 分类名称 -->
        <div class="form-group">
          <label>
            <i class="iconfont icon-name"></i>
            分类名称
          </label>
          <input
            v-model="formData.name"
            class="form-input"
            placeholder="请输入分类名称"
          />
        </div>

        <!-- 分类描述 -->
        <div class="form-group">
          <label>
            <i class="iconfont icon-description"></i>
            分类描述
          </label>
          <textarea
            v-model="formData.description"
            class="form-input"
            placeholder="请输入分类描述(可选)"
            rows="3"
          ></textarea>
        </div>

        <div class="form-row">
          <!-- 排序值 -->
          <div class="form-group">
            <label>
              <i class="iconfont icon-sort"></i>
              排序值
            </label>
            <input
              v-model="formData.sort_order"
              type="number"
              class="form-input"
              min="0"
              max="999"
            />
          </div>

          <!-- 状态 -->
          <div class="form-group">
            <label>
              <i class="iconfont icon-status"></i>
              状态
            </label>
            <div class="radio-group">
              <div
                class="radio-item"
                :class="{ active: formData.status === '1' }"
                @click="formData.status = '1'"
              >
                启用
              </div>
              <div
                class="radio-item"
                :class="{ active: formData.status === '0' }"
                @click="formData.status = '0'"
              >
                禁用
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="dialog-footer">
        <button
          class="btn cancel-btn"
          @click="closeDialog"
        >
          <i class="iconfont icon-close"></i>取消
        </button>
        <button
          class="btn submit-btn"
          @click="handleSubmit"
          :disabled="loading"
        >
          <i class="iconfont icon-save"></i>{{ isEdit ? '保存修改' : '创建分类' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  showDialog: Boolean,
  categoryData: {
    type: Object,
    default: () => ({
      id: "",
      name: "",
      description: "",
      sort_order: 0,
      status: "1"
    })
  },
  isEdit: Boolean
});

const emit = defineEmits(["close", "submit"]);

const formData = ref({ ...props.categoryData });
const loading = ref(false);

// 监听props变化
watch(
  () => props.categoryData,
  (newVal) => {
    formData.value = { ...newVal };
  },
  { deep: true }
);

// 关闭弹窗
const closeDialog = () => {
  emit("close");
};

// 提交表单
const handleSubmit = async () => {
  if (!formData.value.name) {
    // 这里可以添加toast提示
    return;
  }

  loading.value = true;
  try {
    emit("submit", formData.value);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped lang="less">
/* 弹窗遮罩层 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  overflow: hidden;
  transition: background-color 0.3s ease-out;

  &.active {
    background-color: rgba(0, 0, 0, 0.45);
  }

  /* 云朵装饰 */
  .cloud {
    position: absolute;
    font-size: 80px;
    opacity: 0;
    animation: float 8s infinite ease-in-out;
    z-index: -1;
    transition: opacity 0.5s ease;
    color: white;

    &.cloud-1 {
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }
    &.cloud-2 {
      top: 60%;
      right: 15%;
      animation-delay: 1s;
    }
    &.cloud-3 {
      bottom: 10%;
      left: 25%;
      animation-delay: 2s;
    }
  }

  &.active .cloud {
    opacity: 0.1;
  }

  /* 星星装饰 */
  .decoration {
    position: absolute;
    font-size: 18px;
    animation: float 6s infinite ease-in-out;
    z-index: -1;
    color: var(--bs-theme-color);
    opacity: 0;

    &.star-1 {
      top: 15%;
      right: 15%;
      animation-delay: 0.5s;
    }
    &.star-2 {
      top: 70%;
      left: 15%;
      animation-delay: 1s;
    }
    &.star-3 {
      bottom: 15%;
      right: 20%;
      animation-delay: 1.5s;
    }
  }

  &.active .decoration {
    opacity: 0.1;
  }
}

/* 弹窗内容容器 */
.dialog-content {
  width: 500px;
  max-width: 90vw;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transform: translateY(40px) scale(0.95);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 100000;

  /* 弹入动画 */
  &.bounce-in {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* 弹窗头部 */
  .dialog-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bs-theme-color);
    color: white;
    position: relative;
    z-index: 2;

    .dialog-title {
      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
      
      .title-underline {
        height: 2px;
        width: 40px;
        background: white;
        border-radius: 1px;
        margin-top: 6px;
      }
    }

    .close-btn {
      width: 32px;
      height: 32px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }

  /* 弹窗主体 */
  .dialog-body {
    padding: 15px;
    position: relative;
    z-index: 2;

    .form-group {
      margin-bottom: 12px;

      label {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #606266;
        margin-bottom: 6px;

        .iconfont {
          margin-right: 6px;
          font-size: 14px;
        }
      }

      .form-input {
        width: 100%;
        padding: 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-size: 13px;
        transition: all 0.3s;
        background: white;
        color: #333;

        &:focus {
          outline: none;
          border-color: var(--bs-theme-color);
        }
      }

      textarea.form-input {
        min-height: 80px;
        resize: vertical;
      }
    }

    .form-row {
      display: flex;
      gap: 12px;

      .form-group {
        flex: 1;
      }
    }

    .radio-group {
      display: flex;
      gap: 10px;
      margin-top: 5px;
      
      .radio-item {
        padding: 8px 15px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background-color: #fff;
        color: #606266;
        font-size: 13px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
        
        &:hover {
          background-color: #f5f7fa;
        }
        
        &.active {
          background-color: var(--bs-theme-color);
          color: white;
          border-color: var(--bs-theme-color);
        }
      }
    }
  }

  /* 弹窗底部 */
  .dialog-footer {
    padding: 12px 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f5f7fa;
    border-top: 1px solid #dcdfe6;
    position: relative;
    z-index: 2;

    .btn {
      padding: 8px 16px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      &.cancel-btn {
        background: white;
        color: #606266;

        &:hover:not(:disabled) {
          background: #f2f6fc;
          transform: translateY(-1px);
        }
      }

      &.submit-btn {
        background: var(--bs-theme-color);
        color: white;
        border-color: var(--bs-theme-color);

        &:hover:not(:disabled) {
          background: #66b1ff;
          transform: translateY(-1px);
        }
      }
    }
  }
}

/* 浮动动画 */
@keyframes float {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg); 
  }
  25% { 
    transform: translateY(-15px) translateX(5px) rotate(2deg); 
  }
  50% { 
    transform: translateY(0) translateX(10px) rotate(0deg); 
  }
  75% { 
    transform: translateY(-10px) translateX(-5px) rotate(-2deg); 
  }
}

/* 响应式设计 */
@media (max-width: 600px) {
  .dialog-content {
    width: 90vw;

    .dialog-header {
      padding: 12px;

      .dialog-title h2 {
        font-size: 16px;
      }
    }

    .dialog-body {
      .form-row {
        flex-direction: column;
        gap: 12px;
      }
    }

    .dialog-footer {
      flex-wrap: wrap;
      
      .btn {
        flex: 1;
        min-width: 100px;
        padding: 6px 12px;
        font-size: 12px;
      }
    }
  }
}
</style>